import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'

export default {
  // app是vue实例
  install (app) {
    app.directive('imgLazy',
      {
        mounted (el, binding) {
          console.log(el, binding)
          // 图片懒加载逻辑
          // 1：为图片初始化一个默认地址
          el.src = defaultImg
          // 2:执行监听逻辑
          const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 进入监视区
              // 1:停止观察
              stop()
              // 2:请求src/设置src
              // 因为此时组件发出的请求会得到包含图片的商品信息，所以这里一般是只做一个是否加载的动作，即是否给图片设置src，来控制显隐，优化性能。理想的状态是图片懒加载建立在组件懒加载的基础之上
              el.src = binding.value
            }
          }, { threshold: 0.5 })
        }
      })
  }

}
